<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Personal Home</title>
    </h:head>
    <h:body>
        <ui:composition template="./templateuser.xhtml">
            <ui:define name="center">
                
                <p:panel header="Personal Information" style="margin-left: 15px;margin-top: 15px;margin-right: 20px">
                    <h:panelGrid columns="2" id="regGrid">
                        <h:outputLabel for="name">Name:</h:outputLabel>
                        <p:outputLabel id="name" value="#{userBean.user.name}">
                        </p:outputLabel>

                        <h:outputLabel for="surname">Surname:</h:outputLabel>
                        <p:outputLabel id="surname" value="#{userBean.user.surname}">
                        </p:outputLabel>

                        <h:outputLabel for="username">Username:</h:outputLabel>
                        <p:outputLabel id="username" value="#{userBean.user.username}">
                        </p:outputLabel>

                        <h:outputLabel for="email">Email:</h:outputLabel>
                        <p:outputLabel id="email" value="#{userBean.user.email}" >
                        </p:outputLabel>

                        <h:outputLabel for="address">Address:</h:outputLabel>
                        <p:outputLabel id="address" value="#{userBean.user.address}" >
                        </p:outputLabel>

                        <h:outputLabel for="telnumber">Telephone number:</h:outputLabel>
                        <p:outputLabel id="telnumber" value="#{userBean.user.telnumber}" >
                        </p:outputLabel>
                        
                    </h:panelGrid>
                    
                    <p:toolbar style="margin-top: 20px">
                            <p:toolbarGroup align="left">
                                <p:commandButton value="Modify Profile" action="modifyprofile?faces-redirect=true" />
                                <p:commandButton value="Change Password" action="passwordchange?faces-redirect=true" />
                            </p:toolbarGroup>
                    </p:toolbar>
                    
                </p:panel>
                
                <h:form>
                    <p:remoteCommand name="onload" action="#{userBean.visualizeNewNotification}" autoRun="true" />
                    
                    <p:accordionPanel>
                        <p:tab title="Notifications List" titleStyle="background-color: #99CBFF;">
                            <p:dataList id="invitedlist" value="#{userBean.notifications}" var="notification" type="unordered" itemType="none" >
                                <f:facet name="header">
                                    Notifications
                                </f:facet>
                                <h:outputText value="#{notification.toString()}" style="display:inline-block"/>
                            </p:dataList>
                        </p:tab>
                    </p:accordionPanel>
                    
                </h:form>
                
                <p:dialog header="New Invitations" widgetVar="dialogInvitations"  modal="true" appendTo="@(body)" width="350">
                    <h:form id="forminv">
                        <h:outputText value="You've been invited to:" />
                        <p:dataList id="invitationlist" value="#{userBean.newinvitations}" var="invitation" type="unordered" itemType="none" style="width: 350px">
                            <p:outputLabel styleClass="ui-icon ui-icon-mail-closed" style="display:inline-block;"/>
                            <h:outputText value="#{invitation.event.name}" style="display:inline-block;font-weight: bold;margin-left: 15px"/>
                            <p:spacer width="15"/>
                            from
                            <p:spacer width="15"/>
                            <h:outputText value="#{invitation.event.creator.username}" style="display:inline-block;font-weight: bold"/>
                        </p:dataList>
                        <p:toolbar style="margin-left: 15px;width: 275px;margin-right: 20px;">
                            <p:toolbarGroup align="left">
                                <p:commandButton value="Show Invitation List" action="invitationlist?faces-redirect=true" />
                            </p:toolbarGroup>
                        </p:toolbar>
                        
                    </h:form>
                </p:dialog>
                
                <p:dialog id="dialogChange" header="Change Notification" widgetVar="dialogChangeNotification"  modal="true" appendTo="@(body)" width="350">
                    <p:ajax event="close" listener="#{userBean.handleClose}" update="formChange:eventDetails,dialogDelete,dialogOneDay,dialogThreeDays,forminv:invitationlist"/>
                    <h:form id="formChange">
                        <h:outputLabel value="This event has been changed." style="font-weight: bold;margin-bottom: 15px"/>
                        <h:panelGrid id="eventDetails" columns="2">
                            <h:outputLabel for="name" value="Name:" />
                            <p:outputLabel id="name" value="#{userBean.currentNotification.event.name}" />

                            <h:outputLabel for="date" value="Date:" />
                            <p:outputLabel id="date" value="#{userBean.currentNotification.event.date}" >
                                <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+1"/>
                            </p:outputLabel>

                            <h:outputLabel for="from" value="From:" />
                            <p:outputLabel id="from" value="#{userBean.currentNotification.event.startTime}" >
                                <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                            </p:outputLabel>

                            <h:outputLabel for="to" value="To:" />
                            <p:outputLabel id="to" value="#{userBean.currentNotification.event.endTime}" >
                                <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                            </p:outputLabel>

                            <h:outputLabel for="address" value="Address:" />
                            <p:outputLabel id="address" value="#{userBean.currentNotification.event.place.address}" >
                            </p:outputLabel>

                            <h:outputLabel for="city" value="City:" />
                            <p:outputLabel id="city" value="#{userBean.currentNotification.event.place.city.name}" >
                            </p:outputLabel>
                        </h:panelGrid>
                        <h:outputLabel value="Do you still want to participate?" style="font-weight: bold;margin-bottom: 15px;margin-top: 15px"/>
                        <p:outputPanel>
                            <p:commandButton value="Yes" action="#{userBean.participateChangeNotification()}" style="width: 80px">
                            </p:commandButton>
                            <p:commandButton value="No" action="#{userBean.declineChangeNotification()}" style="width: 80px">
                            </p:commandButton>
                        </p:outputPanel>
                    </h:form>
                </p:dialog>
                
                <p:dialog id="dialogDelete" header="Delete Notification" widgetVar="dialogDeleteNotification"  modal="true" appendTo="@(body)" width="300">
                    <p:ajax event="close" listener="#{userBean.handleClose}" update="formChange:eventDetails,dialogDelete,dialogOneDay,dialogThreeDays,forminv:invitationlist"/>
                    <h:outputLabel value="This event has been cancelled: #{userBean.currentNotification.event.name}"/>
                    
                </p:dialog>
                
                <p:dialog id="dialogOneDay" header="Bad Weather notification" widgetVar="dialogOneDayNotification"  modal="true" appendTo="@(body)" width="300">
                    <p:ajax event="close" listener="#{userBean.handleClose}" update="formChange:eventDetails,dialogDelete,dialogOneDay,dialogThreeDays,forminv:invitationlist"/>
                    <h:panelGrid  columns="2">
                        <h:outputLabel value="For the event #{userBean.currentNotification.event.name}, the weather forecast is bad: "/>
                        <img src="#{userBean.weatherForecast}" style="display:inline-block;"></img>
                        
                    </h:panelGrid>
                </p:dialog>
                
                <p:dialog id="dialogThreeDays" header="Bad Weather notification" widgetVar="dialogThreeDaysNotification"  modal="true" appendTo="@(body)" width="300">
                    <p:ajax event="close" listener="#{userBean.handleClose}" update="formChange:eventDetails,dialogDelete,dialogOneDay,dialogThreeDays,forminv:invitationlist"/>
                    
                    <h:panelGrid  columns="2">
                        <h:outputLabel value="For the event #{userBean.currentNotification.event.name}, the weather forecast is bad: "/>
                        <img src="#{userBean.weatherForecast}"></img>
                    </h:panelGrid>
                    <h:panelGrid  columns="1">
                        <h:outputLabel value="Do you want to reschedule the event on the following date?" rendered="#{userBean.hasDateThreeDaysNotification()}"/>
                        <p:outputLabel value="#{userBean.dateOfThreeDaysNotification}" rendered="#{userBean.hasDateThreeDaysNotification()}">
                            <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+1"/>
                        </p:outputLabel>
                        <h:outputLabel value="No proposed date avilable, sorry." rendered="#{!userBean.hasDateThreeDaysNotification()}" />
                        <p:outputPanel>
                            <p:commandButton value="Yes" action="#{userBean.acceptProposedDate()}" rendered="#{userBean.hasDateThreeDaysNotification()}" style="width: 80px">
                            </p:commandButton>
                            <p:commandButton value="No" action="#{userBean.declineProposedDate()}" rendered="#{userBean.hasDateThreeDaysNotification()}" style="width: 80px">
                            </p:commandButton>
                        </p:outputPanel>
                    </h:panelGrid>
                   
                </p:dialog>
                
            </ui:define>
        </ui:composition>
        
        
        
    </h:body>
</html>

